﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Advanced Table</title>
    <style>
        table, th, td {
            border-collapse: collapse;
            padding: 5px;
            border: 1px solid gray;
        }

        table {
            border-radius: 10px;
        }

        .psize {
            margin-left: 20px;
        }

        .data {
            font-size: 15px;
            float: right;
            margin: 0;
        }

        thead, tfoot {
            background-color: lightgray;
            font-family: Calibri;
            text-align: left;
        }

        tbody {
            font-family: Calibri;
            font-size: small;
        }

        a {
            text-decoration: none;
        }

        #outline {
            outline: 1px solid orange;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th colspan="6">Drag a column header and drop it here to group by that column</th>
            </tr>
            <tr>
                <th>ProductID</th>
                <th>Product name</th>
                <th>Unit price</th>
                <th>Quantity per unit</th>
                <th>Units in stock</th>
                <th>Discontinued</th>
            </tr>
            <tr>
                <th><input type="text" size="2" /></th>
                <th><input type="text" size="25" /></th>
                <th><input type="text" size="10" /><input type="button" width="10" value="S" /></th>
                <th><input type="text" size="10" /></th>
                <th><input type="text" size="10" /></th>
                <th><input type="checkbox" /><input type="button" value="S" /></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="6">
                    <input type="button" value="<<" />
                    <input type="button" value="<" />
                    <a id="outline" href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">6</a>
                    <a href="#">7</a>
                    <a href="#">8</a>
                    <a href="#">9</a>
                    <a href="#">10</a>
                    <a href="#"> ... </a>
                    <input type="button" value=">" />
                    <input type="button" value=">>" />
                    <label class="psize" for="page_size">Page size: </label>
                    <select id="page_size">
                        <option selected>10</option>
                        <option>20</option>
                    </select>
                    <span>
                        <p class="data">335104 items in 33511 pages</p>
                    </span>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>Chai</td>
                <td>$18.00</td>
                <td>10 boxes x 20 bags</td>
                <td>39</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Chang</td>
                <td>$19.00</td>
                <td>24 - 12 oz bottles</td>
                <td>17</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Aniseed Syrup</td>
                <td>$12.00</td>
                <td>12 - 550 ml bottles</td>
                <td>13</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Chef Anton's Cajun Seasoning</td>
                <td>$22.00</td>
                <td>48 - 6 oz jars</td>
                <td>53</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>5</td>
                <td>Chef Anton's Gumbo Mix</td>
                <td>$21.35</td>
                <td>36 boxes</td>
                <td>0</td>
                <td><input type="checkbox" checked disabled /></td>
            </tr>
            <tr>
                <td>6</td>
                <td>Grandma's Boysenberry Spread</td>
                <td>$25.00</td>
                <td>12 - 8 oz jars</td>
                <td>120</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>7</td>
                <td>Uncle Bob's Organic Dried Pears</td>
                <td>$30.00</td>
                <td>12 - 1 lb pkgs.</td>
                <td>15</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>8</td>
                <td>Northwoods Cranberry Sauce</td>
                <td>$40.00</td>
                <td>12 - 12 oz jars</td>
                <td>6</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>9</td>
                <td>Mishi Kobe Niku</td>
                <td>$97.00</td>
                <td>18 - 500 g pkgs.</td>
                <td>29</td>
                <td><input type="checkbox" checked disabled /></td>
            </tr>
            <tr>
                <td>10</td>
                <td>Ikura</td>
                <td>$31.00</td>
                <td>12 - 200 ml jars</td>
                <td>31</td>
                <td><input type="checkbox" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>